<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>青少年社交网络可视化分析系统</title>
    <link rel="stylesheet" href="/static/icon/iconfont.css" />
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/echarts.min.js"></script>
  </head>
  <body>
    <div class="container-header">
      <ul class="nowTime">
        <li></li>
        <li></li>
      </ul>
      <div class="location">
        <i class="icon iconfont icon-buoumaotubiao23"></i>
        <span class="areaName"></span>
      </div>
      <h3>青少年社交网络可视化分析系统</h3>
    </div>
    <div class="container-content">
      <div class="top" style="display: flex; justify-content: space-between">
        <div class="count-base" style="width: 29%">
          <div class="com-count-title">兴趣类别分布</div>
          <div class="com-screen-content">
            <div id="main1" style="width: 100%; height: 300px"></div>
          </div>
          <span class="left-top"></span>
          <span class="right-top"></span>
          <span class="left-bottom"></span>
          <span class="right-bottom"></span>
        </div>
        <div class="count-resource q1" style="width: 40%">
          <div class="com-count-title">调查人数统计</div>
          <div class="com-screen-content2">
            <ul class="use-data">
              <li>
                <p class="data-count">{{ total_count }}</p>
                <span class="data-name">总人数</span>
              </li>
              <li>
                <p class="data-count">{{ female_count }}</p>
                <span class="data-name">女性人数</span>
              </li>
              <li>
                <p class="data-count">{{ male_count }}</p>
                <span class="data-name">男性人数</span>
              </li>
            </ul>
            <div class="com-screen-content">
              <div id="main2" style="margin-top: 10px; width: 100%; height: 240px"></div>
            </div>
            <span class="left-top"></span>
            <span class="right-top"></span>
            <span class="left-bottom"></span>
            <span class="right-bottom"></span>
          </div>
        </div>
        <div class="count-resource q2" style="width: 29%">
          <div class="com-count-title">各体育活动参与人数</div>
          <div class="com-screen-content">
            <div id="main5" style="width: 100%; height: 300px">{{ sports_activities }}</div>
          </div>
          <span class="left-top"></span>
          <span class="right-top"></span>
          <span class="left-bottom"></span>
          <span class="right-bottom"></span>
        </div>
      </div>

      <div class="mid" style="display: flex; justify-content: space-between; height: 500px">
        <div class="count-topic e1" style="width: 29%">
          <div class="com-count-title">宗教信仰</div>
          <div class="com-screen-content">
            <div id="main6" style="width: 100%; height: 300px"></div>
          </div>
          <span class="left-top"></span>
          <span class="right-top"></span>
          <span class="left-bottom"></span>
          <span class="right-bottom"></span>
        </div>
        <div class="count-share w1" style="width: 40%">
          <div class="com-count-title">统计数据</div>
          <div class="com-screen-content">
            <div class="topRec_List">
              <dl>
                <dd>数据名称</dd>
                <dd>数据人数</dd>
                <dd></dd>
              </dl>
              <div class="maquee">
                <ul>
                  {% for i in interest_bar_data %}
                  <li>
                    <div>{{ i.name }}</div>
                    <div>{{ i.value }}</div>
                  </li>
                  {% endfor %}
                </ul>
              </div>
            </div>
          </div>
          <span class="left-top"></span>
          <span class="right-top"></span>
          <span class="left-bottom"></span>
          <span class="right-bottom"></span>
        </div>
        <div class="count-topic e2" style="width: 29%">
          <div class="com-count-title">毕业年份</div>
          <div class="com-screen-content">
            <div id="main7" style="width: 100%; height: 300px"></div>
          </div>
          <span class="left-top"></span>
          <span class="right-top"></span>
          <span class="left-bottom"></span>
          <span class="right-bottom"></span>
        </div>
      </div>

      <div class="clearfix"></div>
    </div>

    <script type="text/javascript">
      //根据不同的分辨率调用不同的css和js
      document.write("<link href='/static/css/test-1920.css' rel='stylesheet' type='text/css'>")
      {% comment %} if (window.screen.width >= 1600) {


        document.writeln('<script type="text/javascript" src="/static/js/test-1920.js"><\/script>')
      } else if (window.screen.width < 1600 && window.screen.width >= 1280) {
        document.write("<link href='/static/css/test-1280.css' rel='stylesheet' type='text/css'>")

        document.writeln('<script type="text/javascript" src="/static/js/test-1280.js"><\/script>')
      } else {
        document.write("<link href='/static/css/test-1024.css' rel='stylesheet' type='text/css'>")

        document.writeln('<script type="text/javascript" src="/static/js/test-1024.js"><\/script>')
      } {% endcomment %}
    </script>
    <!--大屏-->
    <script type="text/javascript">
      function autoScroll(obj) {
        $(obj)
          .find("ul")
          .animate(
            {
              marginTop: "-39px",
            },
            500,
            function () {
              $(this).css({ marginTop: "0px" }).find("li:first").appendTo(this)
            },
          )
      }
      $(function () {
        setInterval('autoScroll(".maquee")', 2000)
      })
    </script>
    <script>
      $(function () {
        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById("main1"))
        var myChart2 = echarts.init(document.getElementById("main2"))
        //var myChart4 = echarts.init(document.getElementById('main4'));
        var myChart5 = echarts.init(document.getElementById("main5"))
        var myChart6 = echarts.init(document.getElementById("main6"))
        var myChart7 = echarts.init(document.getElementById("main7"))

        getNowFormatDate()
        init_myChart1()
        init_myChart2()
        init_myChart5()
        init_myChart6()
        init_myChart7()


        function init_myChart1() {
          option = {
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b} : {c} ({d}%)",
            },
            color: ["#8fc31f", "#f35833", "#00ccff", "#ffcc00", "#f5e965", "#a74faf", "#ff9668"],

            series: [
              {
                name: "兴趣类别分布",
                type: "pie",
                radius: "40%",
                center: ["50%", "50%"],
                data: {{ interest_bar_data|safe }},
                itemStyle: {
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                  },
                },
                itemStyle: {
                  normal: {
                    label: {
                      show: true,
                      //	                            position:'inside',
                      formatter: "{b} : {c} ({d}%)",
                      fontSize: 14, //文字的字体大小
                    },
                  },
                  labelLine: { show: true },
                },
              },
            ],
          }
          // 使用刚指定的配置项和数据显示图表。
          myChart1.setOption(option)
        }

        function init_myChart2() {
          var data = {
            uploadData: {{ all_count_bar|safe }},
            updateData: {{ all_male_count|safe }},
            viewData: {{ all_female_count|safe }},
          }
          var uploadCnt = []
          var updateCnt = []

          var viewCnt = []
          if (data.uploadData != null) {
            for (var i = 0; i < data.uploadData.length; i++) {
              uploadCnt.push(data.uploadData[i].count)
            }
          }
          if (data.updateData != null) {
            for (var i = 0; i < data.updateData.length; i++) {
              updateCnt.push(data.updateData[i].count)
            }
          }

          if (data.viewData != null) {
            for (var i = 0; i < data.viewData.length; i++) {
              viewCnt.push(data.viewData[i].count)
            }
          }
          option = {
            tooltip: {
              trigger: "axis",
              formatter: function (params, ticket, callback) {
                var res = ""
                for (var i = 0, l = params.length; i < l; i++) {
                  res += "" + params[i].seriesName + " : " + params[i].value + "<br>"
                }
                return res
              },
              transitionDuration: 0,
              backgroundColor: "rgba(83,93,105,0.8)",
              borderColor: "#535b69",
              borderRadius: 8,
              borderWidth: 2,
              padding: [5, 10],
              axisPointer: {
                type: "line",
                lineStyle: {
                  type: "dashed",
                  color: "#ffff00",
                },
              },
            },
            legend: {
              icon: "circle",
              itemWidth: 8,
              itemHeight: 8,
              itemGap: 10,
              top: "16",
              right: "10",
              data: ["总人数", "女生人数", "男生人数"],
              textStyle: {
                fontSize: 14,
                color: "#a0a8b9",
              },
            },
            grid: {
              top: "46",
              left: "13%",
              right: "10",
              //bottom: '10%',
              containLabel: false,
            },
            xAxis: [
              {
                type: "category",
                boundaryGap: true,
                axisLabel: {
                  interval: 0,
                  fontSize: 14,
                },
                axisLine: {
                  show: false,
                  lineStyle: {
                    color: "#a0a8b9",
                  },
                },
                axisTick: {
                  show: false,
                },
                data: {{ category_names|safe }},
                offset: 10,
              },
            ],
            yAxis: [
              {
                type: "value",
                axisLine: {
                  show: false,
                  lineStyle: {
                    color: "#a0a8b9",
                  },
                },
                axisLabel: {
                  margin: 10,
                  textStyle: {
                    fontSize: 14,
                  },
                },
                splitLine: {
                  lineStyle: {
                    color: "#2b3646",
                  },
                },
                axisTick: {
                  show: false,
                },
              },
            ],
            series: [
              {
                name: "数据总量",
                type: "bar",
                barWidth: 16,
                barGap: "30%",
                itemStyle: {
                  normal: {
                    color: "#1cc840",
                    barBorderRadius: 3,
                  },
                },
                label: {
                  normal: {
                    show: true,
                    position: "top",
                    textStyle: {
                      color: "#1cc840",
                      fontSize: 12,
                    },
                  },
                },
                data: uploadCnt,
              },
              {
                name: "共享次数",
                type: "bar",
                barWidth: 16,
                barGap: "30%",
                itemStyle: {
                  normal: {
                    color: "#eb5690",
                    barBorderRadius: 3,
                  },
                },
                label: {
                  normal: {
                    show: true,
                    position: "top",
                    textStyle: {
                      color: "#eb5690",
                      fontSize: 12,
                    },
                  },
                },
                data: viewCnt,
              },
              {
                name: "更新量",
                type: "bar",
                barWidth: 16,
                barGap: "30%",
                itemStyle: {
                  normal: {
                    color: "#43bbfb",
                    barBorderRadius: 3,
                  },
                },
                label: {
                  normal: {
                    show: true,
                    position: "top",
                    textStyle: {
                      color: "#43bbfb",
                      fontSize: 12,
                    },
                  },
                },
                data: updateCnt,
              },
            ],
          }
          myChart2.setOption(option)
        }



        function init_myChart5() {
          var XData = {{ activity_names|safe }}
          var yData = {{ all_counts|safe }}
          option = {
            backgroundColor: "",
            xAxis: {
              axisTick: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              splitArea: {
                show: false,
              },
              data: XData,
              axisLabel: {
                formatter: function (value) {
                  var ret = "" //拼接加\n返回的类目项
                  var maxLength = 1 //每项显示文字个数
                  var valLength = value.length //X轴类目项的文字个数
                  var rowN = Math.ceil(valLength / maxLength) //类目项需要换行的行数
                  if (rowN > 1) {
                    //如果类目项的文字大于3,
                    for (var i = 0; i < rowN; i++) {
                      var temp = "" //每次截取的字符串
                      var start = i * maxLength //开始截取的位置
                      var end = start + maxLength //结束截取的位置
                      //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                      temp = value.substring(start, end) + "\n"
                      ret += temp //凭借最终的字符串
                    }
                    return ret
                  } else {
                    return value
                  }
                },
                interval: 0,
                fontSize: 14,
                fontWeight: 100,
                textStyle: {
                  color: "#9faeb5",
                },
              },
              axisLine: {
                lineStyle: {
                  color: "#4d4d4d",
                },
              },
            },
            yAxis: {
              axisTick: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              splitArea: {
                show: false,
              },

              axisLabel: {
                textStyle: {
                  color: "#9faeb5",
                  fontSize: 16,
                },
              },
              axisLine: {
                lineStyle: {
                  color: "#4d4d4d",
                },
              },
            },
            tooltip: {
              trigger: "axis",
              transitionDuration: 0,
              backgroundColor: "rgba(83,93,105,0.8)",
              borderColor: "#535b69",
              borderRadius: 8,
              borderWidth: 2,
              padding: [5, 10],
              formatter: function (params, ticket, callback) {
                var res = ""
                for (var i = 0, l = params.length; i < l; i++) {
                  res += "" + params[i].seriesName + " : " + params[i].value + "<br>"
                }
                return res
              },
              axisPointer: {
                type: "line",
                lineStyle: {
                  type: "dashed",
                  color: "#ffff00",
                },
              },
            },
            series: [
              {
                name: "共享次数",
                type: "bar",
                itemStyle: {
                  normal: {
                    color: {
                      type: "linear",
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#00d386", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#0076fc", // 100% 处的颜色
                        },
                      ],
                      globalCoord: false, // 缺省为 false
                    },
                    barBorderRadius: 15,
                  },
                },
                label: {
                  normal: {
                    show: true,
                    position: "top",
                    textStyle: {
                      color: "#ffc72b",
                      fontSize: 10,
                    },
                  },
                },
                data: yData,
                barWidth: 16,
              },
              {
                name: "折线",
                type: "line",
                itemStyle: {
                  /*设置折线颜色*/
                  normal: {
                    /* color:'#c4cddc'*/
                  },
                },
                data: yData,
              },
            ],
          }
          myChart5.setOption(option)
        }
        //刷新myChart5数据

        function init_myChart6() {
          var data = {
            uploadData: {{ religion_bar_value|safe }},
          }
          var uploadCnt = []
          var updateCnt = []
          //var collectionCnt = [];
          //var dailyCnt = [];
          var viewCnt = []
          var areaNameS = []
          if (data.uploadData) {
            for (var i = 0; i < data.uploadData.length; i++) {
              uploadCnt.push(data.uploadData[i].count)
              areaNameS.push(data.uploadData[i].areaName)
            }
          }
          if (data.updateData) {
            for (var i = 0; i < data.updateData.length; i++) {
              updateCnt.push(data.updateData[i].count)
            }
          }
          if (data.viewData) {
            for (var i = 0; i < data.viewData.length; i++) {
              viewCnt.push(data.viewData[i].count)
            }
          }
          option = {
            tooltip: {
              trigger: "axis",
              transitionDuration: 0,
              backgroundColor: "rgba(83,93,105,0.8)",
              borderColor: "#535b69",
              borderRadius: 8,
              borderWidth: 2,
              padding: [5, 10],
              formatter: function (params, ticket, callback) {
                var res = ""
                for (var i = 0, l = params.length; i < l; i++) {
                  res += "" + params[i].seriesName + " : " + params[i].value + "<br>"
                }
                return res
              },
              axisPointer: {
                type: "line",
                lineStyle: {
                  type: "dashed",
                  color: "#ffff00",
                },
              },
            },
            grid: {
              top: "40",
              left: "30",
              right: "10",
              bottom: "40",

              textStyle: {
                color: "#fff",
              },
            },
            legend: {
              right: "24",
              top: "24",
              itemWidth: 8,
              itemHeight: 12,
              textStyle: {
                color: "#fff",
                fontSize: 14,
              },
              data: ["资源总量"],
            },
            calculable: true,
            xAxis: [
              {
                type: "category",
                axisTick: {
                  show: false,
                },
                axisLine: {
                  show: false,
                  lineStyle: {
                    color: "#868c96",
                  },
                },
                axisLabel: {
                  interval: 0,
                  fontSize: 14,
                  formatter: function (value) {
                    var ret = "" //拼接加\n返回的类目项
                    var maxLength = 2 //每项显示文字个数
                    var valLength = value.length //X轴类目项的文字个数
                    var rowN = Math.ceil(valLength / maxLength) //类目项需要换行的行数
                    if (rowN > 1) {
                      //如果类目项的文字大于3,
                      for (var i = 0; i < rowN; i++) {
                        var temp = "" //每次截取的字符串
                        var start = i * maxLength //开始截取的位置
                        var end = start + maxLength //结束截取的位置
                        //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                        temp = value.substring(start, end) + "\n"
                        ret += temp //凭借最终的字符串
                      }
                      return ret
                    } else {
                      return value
                    }
                  },
                },
                splitArea: {
                  show: false,
                },
                data: areaNameS,
                splitLine: {
                  show: false,
                },
              },
            ],
            yAxis: [
              {
                type: "value",
                offset: -14,
                splitLine: {
                  show: false,
                },
                axisLine: {
                  show: false,
                  lineStyle: {
                    color: "#868c96",
                  },
                },
                axisTick: {
                  show: false,
                },
                axisLabel: {
                  interval: 0,
                  fontSize: 14,
                },
                splitArea: {
                  show: false,
                },
              },
            ],

            series: [
              {
                name: "宗教信仰",
                type: "bar",

                barGap: "10%",
                itemStyle: {
                  //图形样式
                  normal: {
                    color: "#4a4df0",
                  },
                },
                label: {
                  normal: {
                    show: true,
                    position: "top",
                    textStyle: {
                      color: "#ffc72b",
                      fontSize: 10,
                    },
                  },
                },
                data: uploadCnt,
                barWidth: 14,
              },
            ],
          }

          // 使用刚指定的配置项和数据显示图表。
          myChart6.setOption(option)
        }

        function init_myChart7() {
          var colorList = [
            "#ff2600",
            "#ffc000",
            "#00ad4e",
            "#0073c2",
            "#165868",
            "#e76f00",
            "#316194",
            "#723761",
            "#00b2f1",
            "#4d6022",
            "#4b83bf",
            "#f9c813",
            "#0176c0",
          ]
          var xData = {{ graduation_years|safe }}
          var yData = {{ graduation_year_counts|safe }}
          option = {
            color: colorList,
            tooltip: {
              trigger: "axis",
              transitionDuration: 0,
              backgroundColor: "rgba(83,93,105,0.8)",
              borderColor: "#535b69",
              borderRadius: 8,
              borderWidth: 2,
              padding: [5, 10],
              formatter: function (params, ticket, callback) {
                var res = ""
                for (var i = 0, l = params.length; i < l; i++) {
                  res += "" + params[i].seriesName + " : " + params[i].value + "<br>"
                }
                return res
              },
              axisPointer: {
                type: "line",
                lineStyle: {
                  type: "dashed",
                  color: "#ffff00",
                },
              },
            },
            toolbox: {
              show: true,
              feature: {
                mark: {
                  show: true,
                },
              },
            },
            grid: {
              borderWidth: 0,
              top: "40",
              left: "30",
              right: "10",
              bottom: "40",
              textStyle: {
                color: "#fff",
              },
            },
            xAxis: [
              {
                type: "category",
                axisTick: {
                  show: false,
                },
                axisLine: {
                  show: false,
                  lineStyle: {
                    color: "#868c96",
                  },
                },
                axisLabel: {
                  interval: 0,
                  fontSize: 14,
                  formatter: function (value) {
                    var ret = "" //拼接加\n返回的类目项
                    var maxLength = 2 //每项显示文字个数
                    var valLength = value.length //X轴类目项的文字个数
                    var rowN = Math.ceil(valLength / maxLength) //类目项需要换行的行数
                    if (rowN > 1) {
                      //如果类目项的文字大于3,
                      for (var i = 0; i < rowN; i++) {
                        var temp = "" //每次截取的字符串
                        var start = i * maxLength //开始截取的位置
                        var end = start + maxLength //结束截取的位置
                        //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                        temp = value.substring(start, end) + "\n"
                        ret += temp //凭借最终的字符串
                      }
                      return ret
                    } else {
                      return value
                    }
                  },
                },
                splitArea: {
                  show: false,
                },
                data: xData,
                splitLine: {
                  show: false,
                },
              },
            ],
            yAxis: [
              {
                type: "value",
                offset: -14,
                splitLine: {
                  show: false,
                },
                axisLine: {
                  show: false,
                  lineStyle: {
                    color: "#868c96",
                  },
                },
                axisTick: {
                  show: false,
                },
                axisLabel: {
                  interval: 0,
                  fontSize: 14,
                },
                splitArea: {
                  show: false,
                },
              },
            ],
            series: [
              {
                name: "共享次数",
                type: "bar",
                data: yData,
                itemStyle: {
                  normal: {
                    color: function (params) {
                      // build a color map as your need.
                      var colorList = [
                        "#ff2600",
                        "#ffc000",
                        "#00ad4e",
                        "#0073c2",
                        "#165868",
                        "#e76f00",
                        "#316194",
                        "#723761",
                        "#00b2f1",
                        "#4d6022",
                        "#4b83bf",
                        "#f9c813",
                        "#0176c0",
                      ]
                      return colorList[params.dataIndex]
                    },
                  },
                },
                barWidth: 14,
                label: {
                  normal: {
                    show: true,
                    position: "top",
                    textStyle: {
                      color: "#ffc72b",
                      fontSize: 10,
                    },
                  },
                },
              },
              {
                name: "折线",
                type: "line",
                itemStyle: {
                  /*设置折线颜色*/
                  normal: {
                    color: "#d3d5fd",
                  },
                },
                data: yData,
              },
            ],
          }

          // 使用刚指定的配置项和数据显示图表。
          myChart7.setOption(option)
        }
        //获取当前时间
        function getNowFormatDate() {
          var date = new Date()
          var year = date.getFullYear()
          var month = date.getMonth() + 1
          var strDate = date.getDate()
          var Hour = date.getHours() // 获取当前小时数(0-23)
          var Minute = date.getMinutes() // 获取当前分钟数(0-59)
          var Second = date.getSeconds() // 获取当前秒数(0-59)
          var show_day = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")
          var day = date.getDay()
          if (Hour < 10) {
            Hour = "0" + Hour
          }
          if (Minute < 10) {
            Minute = "0" + Minute
          }
          if (Second < 10) {
            Second = "0" + Second
          }
          if (month >= 1 && month <= 9) {
            month = "0" + month
          }
          if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate
          }
          var currentdate =
            "<div><p>" + year + "年" + month + "月" + strDate + "号</p><p>" + show_day[day] + "</p></div>"
          var HMS = Hour + ":" + Minute + ":" + Second
          var temp_time = year + "-" + month + "-" + strDate + " " + HMS
          $(".nowTime li:nth-child(1)").html(HMS)
          $(".nowTime li:nth-child(2)").html(currentdate)
          //$('.topRec_List li div:nth-child(3)').html(temp_time);
          setTimeout(getNowFormatDate, 1000) //每隔1秒重新调用一次该函数
        }
        var resourceDataType = $(".data-label li.active").data("type") //用于切换基础库
        function urlType() {
          resourceDataType = $(".data-label li.active").data("type")
          if (resourceDataType == 1) {
            init_myChart3(legal_person_data)
            $(".com-screen-content .use-data").html(Tpl1)
          } else if (resourceDataType == 2) {
            init_myChart3(people_data)
            $(".com-screen-content .use-data").html(Tpl2)
          } else if (resourceDataType == 3) {
            init_myChart3(picture_data)
            $(".com-screen-content .use-data").html(Tpl3)
          }
        }
        var num = 0
        //    资源类型定时器
        function resourceType() {
          $(".data-label li").eq(num).addClass("active").siblings().removeClass("active")
          //$('.active-data-label').html($('.canvas-pic-two .data-label li.active').html());
          urlType()
          num++
          if (num >= 3) {
            num = 0
          }
        }

        //    资源类型点击切换
        $(".data-label").on("click", "li", function () {
          $(this).addClass("active").siblings().removeClass("active")
          $(".active-data-label").html($(".data-label li.active").html())
          urlType()
        })
        var oTimer = setInterval(resourceType, 3000)
        //    hover清除定时器
        $(".data-label").hover(
          function () {
            clearInterval(oTimer)
          },
          function () {
            oTimer = setInterval(resourceType, 3000)
          },
        )

        /*function resize(){
      	window.addEventListener("resize", () => {
        	this.myChart1.resize;
      	this.myChart2.resize;
      	this.myChart3.resize;
      	this.myChart5.resize;
      	this.myChart6.resize;
      	this.myChart7.resize;
      });
      }*/

        setInterval(function () {
          window.onresize = function () {
            this.myChart1.resize
            this.myChart2.resize
            this.myChart3.resize
            this.myChart5.resize
            this.myChart6.resize
            this.myChart7.resize
          }
        }, 200)

        //myChart7.resize();
      })
    </script>
  </body>
</html>
